<template>
  <view class="datetime-picker-wrapper">
    <!-- 触发按钮 -->
    <view class="picker-trigger" @click="showPicker = true">
      <text class="picker-text" :class="{ 'placeholder': !displayValue }">
        {{ displayValue || placeholder }}
      </text>
      <u-icon name="arrow-right" size="16" color="#999"></u-icon>
    </view>

    <!-- 日期时间选择器 -->
    <u-datetime-picker
      v-model:show="showPicker"
      v-model="internalValue"
      :mode="mode"
      :min-date="minDate"
      :max-date="maxDate"
      :formatter="formatter"
      :filter="filter"
      @confirm="onConfirm"
      @cancel="onCancel"
      :title="title"
      :close-on-click-overlay="closeOnClickOverlay"
      :safe-area-inset-bottom="safeAreaInsetBottom"
    />
  </view>
</template>

<script setup>
/**
 * 日期时间选择器公共组件
 * 
 * 基于工单受理页面的时间选择器功能，提供完整的年月日时分选择功能
 * 严格按照《App端编码规范权威标准声明.md》实现
 * 
 * @author Wu.Liang
 * @date 2025-01-22
 * @version 1.0.0
 */

import { ref, computed, watch } from 'vue'

// 组件属性定义
const props = defineProps({
  // 双向绑定的值
  modelValue: {
    type: [String, Date, Number],
    default: ''
  },
  // 选择器模式：date(日期) | time(时间) | datetime(日期时间) | year-month(年月)
  mode: {
    type: String,
    default: 'datetime',
    validator: (value) => ['date', 'time', 'datetime', 'year-month'].includes(value)
  },
  // 占位符文本
  placeholder: {
    type: String,
    default: '请选择时间'
  },
  // 选择器标题
  title: {
    type: String,
    default: '选择时间'
  },
  // 最小日期
  minDate: {
    type: [String, Date, Number],
    default: null
  },
  // 最大日期
  maxDate: {
    type: [String, Date, Number],
    default: null
  },
  // 格式化函数
  formatter: {
    type: Function,
    default: null
  },
  // 过滤函数
  filter: {
    type: Function,
    default: null
  },
  // 是否点击遮罩层关闭
  closeOnClickOverlay: {
    type: Boolean,
    default: true
  },
  // 是否开启底部安全区域适配
  safeAreaInsetBottom: {
    type: Boolean,
    default: true
  },
  // 显示格式
  displayFormat: {
    type: String,
    default: 'YYYY-MM-DD HH:mm'
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  // 自定义样式类
  customClass: {
    type: String,
    default: ''
  }
})

// 组件事件定义
const emit = defineEmits([
  'update:modelValue',
  'confirm',
  'cancel',
  'change'
])

// 响应式数据
const showPicker = ref(false)
const internalValue = ref('')

// 计算属性：显示值
const displayValue = computed(() => {
  if (!props.modelValue) return ''
  
  try {
    const date = new Date(props.modelValue)
    if (isNaN(date.getTime())) return ''
    
    // 根据模式格式化显示
    switch (props.mode) {
      case 'date':
        return formatDate(date, 'YYYY-MM-DD')
      case 'time':
        return formatDate(date, 'HH:mm')
      case 'year-month':
        return formatDate(date, 'YYYY-MM')
      case 'datetime':
      default:
        return formatDate(date, props.displayFormat)
    }
  } catch (error) {
    console.error('日期格式化错误:', error)
    return ''
  }
})

// 监听modelValue变化
watch(() => props.modelValue, (newVal) => {
  internalValue.value = newVal
}, { immediate: true })

// 监听internalValue变化
watch(internalValue, (newVal) => {
  emit('update:modelValue', newVal)
  emit('change', newVal)
})

// 日期格式化函数
const formatDate = (date, format) => {
  if (!date || isNaN(date.getTime())) return ''
  
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')
  
  return format
    .replace('YYYY', year)
    .replace('MM', month)
    .replace('DD', day)
    .replace('HH', hours)
    .replace('mm', minutes)
    .replace('ss', seconds)
}

// 确认选择
const onConfirm = (e) => {
  console.log('DateTimePicker确认选择:', e)
  
  try {
    const selectedValue = e.value
    internalValue.value = selectedValue
    
    // 触发确认事件
    emit('confirm', {
      value: selectedValue,
      formatted: displayValue.value,
      timestamp: new Date(selectedValue).getTime()
    })
    
    showPicker.value = false
    
    // 显示选择结果提示
    uni.showToast({
      title: `已选择：${displayValue.value}`,
      icon: 'success',
      duration: 1500
    })
  } catch (error) {
    console.error('时间选择确认失败:', error)
    uni.showToast({
      title: '时间选择失败',
      icon: 'error'
    })
  }
}

// 取消选择
const onCancel = () => {
  console.log('DateTimePicker取消选择')
  showPicker.value = false
  emit('cancel')
}

// 获取当前时间（用于初始化）
const getCurrentTime = () => {
  const now = new Date()
  return now.getTime()
}

// 获取默认最小时间（当前时间）
const getDefaultMinTime = () => {
  return getCurrentTime()
}

// 获取默认最大时间（当前时间+1年）
const getDefaultMaxTime = () => {
  const now = new Date()
  now.setFullYear(now.getFullYear() + 1)
  return now.getTime()
}

// 验证时间范围
const validateTimeRange = (time) => {
  if (!time) return true
  
  const timestamp = new Date(time).getTime()
  const minTime = props.minDate ? new Date(props.minDate).getTime() : getDefaultMinTime()
  const maxTime = props.maxDate ? new Date(props.maxDate).getTime() : getDefaultMaxTime()
  
  return timestamp >= minTime && timestamp <= maxTime
}

// 暴露给父组件的方法
defineExpose({
  show: () => { showPicker.value = true },
  hide: () => { showPicker.value = false },
  reset: () => { 
    internalValue.value = ''
    emit('update:modelValue', '')
  },
  getValue: () => internalValue.value,
  getDisplayValue: () => displayValue.value,
  validate: validateTimeRange
})
</script>

<style lang="scss" scoped>
.datetime-picker-wrapper {
  width: 100%;
}

.picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background-color: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  min-height: 44px;
  box-sizing: border-box;
  transition: all 0.3s ease;
  
  &:active {
    background-color: #f5f7fa;
    border-color: #409eff;
  }
}

.picker-text {
  flex: 1;
  font-size: 16px;
  color: #303133;
  line-height: 20px;
  
  &.placeholder {
    color: #c0c4cc;
  }
}

// 响应式设计
@media (max-width: 750px) {
  .picker-trigger {
    padding: 10px 14px;
    min-height: 40px;
  }
  
  .picker-text {
    font-size: 15px;
  }
}

// 主题适配
.theme-dark {
  .picker-trigger {
    background-color: #2d2d2d;
    border-color: #4c4d4f;
    color: #e4e7ed;
  }
  
  .picker-text {
    color: #e4e7ed;
    
    &.placeholder {
      color: #909399;
    }
  }
}

// 禁用状态
.picker-trigger.disabled {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #c0c4cc;
  cursor: not-allowed;
  
  &:active {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
  }
  
  .picker-text {
    color: #c0c4cc;
  }
}
</style>
